<template>
	<view class="page-content">
		<f-navbar title="详情" bgColor="linear-gradient(101deg, #47B352 1%, #47B352 29%, #1F9970 100%)" fontColor="#ffffff"
			leftIconColor="#ffffff"></f-navbar>
		<view class="header-bg"></view>
		<!-- <view class="content-box" :style="{top:`${systemInfo.navBarH}px`}" v-if="taskInfo"> -->
		<view class="content-box"  v-if="taskInfo">
			<view>
				<view class="list-item">
					<view class="item-header flex align-center">
						<view class="flex-sub text-cut text-cut1">订单号：{{taskInfo.orderCode}}</view>
						<view>
							<text class="color2" v-if="taskInfo.driverOrderStatus==0">待签到</text>
							<text class="color3" v-else-if="taskInfo.driverOrderStatus==1">待提交回执</text>
							<text class="color3" v-else-if="taskInfo.driverOrderStatus==2">已完成</text>
						</view>
					</view>
					<view class="item-middle">
						<view class="flex align-start item-step">
							<view class="item-check"></view>
							<view class="flex-sub item-right">
								<view class="item-title">
									<text>始发地</text>
									<text class="margin-left" v-if="pageData.taskType == '0'">{{taskInfo.emissionUnitName}}</text>
									<text class="margin-left" v-if="pageData.taskType == '1'">{{taskInfo.recycleBinName}}</text>
								</view>
								<view class="item-address" v-if="pageData.taskType == '0'">
									地址：{{taskInfo.emissionUnitAddress}}
								</view>
								<view class="item-address" v-if="pageData.taskType == '1'">
									地址：{{taskInfo.recycleBinAddress}}
								</view>
							</view>
							<view class="left-line"></view>
						</view>
						<view class="flex align-start item-step">
							<view class="item-check active"></view>
							<view class="flex-sub item-right">
								<view class="item-title">
									<text>目的地</text>
									<text class="margin-left" v-if="pageData.taskType == '0'">{{taskInfo.recycleBinName}}</text>
									<text class="margin-left" v-if="pageData.taskType == '1'">{{taskInfo.startingStationName}}</text>
								</view>
								<view class="item-address" v-if="pageData.taskType == '0'">
									地址：{{taskInfo.recycleBinAddress}}
								</view>
								<view class="item-address" v-if="pageData.taskType == '1'">
									地址：{{taskInfo.startingStationAddress}}
								</view>
								<view class="item-info">
									联系人：{{taskInfo.recycleBinContact}} {{taskInfo.recycleBinPhone}}
								</view>
							</view>
						</view>
					</view>
					<view class="item-bottom">
						<view class="item-info">派单时间：{{taskInfo.createTime || ''}}</view>
						<view class="item-info-sm">车牌号码：{{taskInfo.licensePlateNumber || ''}}</view>
						<view class="item-info-sm">对接人：{{taskInfo.contact || ''}}</view>
						<view class="item-info-sm">对接人手机号：{{taskInfo.contactPhone || ''}}</view>
						<view class="item-info-sm" v-if="taskInfo.oilName">运输油品：{{taskInfo.oilName || ''}}</view>
						<view class="item-info-sm" v-if="taskInfo.barrelsNumber">桶数：{{taskInfo.barrelsNumber || '0'}}桶</view>
						<view class="item-info-sm" v-if="taskInfo.weight">预估重量：{{taskInfo.weight || '0'}}kg</view>
						<view class="item-info-sm" v-if="pageData.taskType == '0'">备注：{{taskInfo.remark || ''}}</view>
						
					</view>
				</view>	
			</view>
			<view class="info-box">
				<view class="title-box">运输油品</view>
				<view class="route-box">
					<view class="route-time" v-for="(item,index) in taskInfo.oilList">
						<view class="item-info-sm" >油品名称：{{item.oilName}}</view>
						<view class="item-info-sm" >称重信息：{{item.actualWeight}}kg</view>
					</view>
				</view>
			</view>
			
			<view class="info-box" v-if="taskInfo.taskCheckInList">
				<view class="title-box">现场照片</view>
				<view class="img-box" v-if="taskInfo.taskCheckInList.length">
					<u-album multipleSize="197rpx" :urls="taskInfo.taskCheckInList[0].signInPhoto.split(',')"></u-album>
					<!-- <image class="img-item" :src="item" mode="aspectFill"
						v-for="(item,index) in taskInfo.taskCheckInList[0].signInPhoto.split(',')" :key="index"></image> -->
				</view>
				<view class="item-info-sm" v-if="taskInfo.taskCheckInList.length">签到位置：{{taskInfo.taskCheckInList[0].position}}</view>
			</view>
			<view class="info-box" v-if="taskInfo.taskRecorderList">
				<view class="title-box">附件信息</view>
				<view class="img-box" v-if="taskInfo.taskRecorderList.length">
					<u-album multipleSize="197rpx" :urls="taskInfo.taskRecorderList[0].photo.split(',')"></u-album>
					<!-- <image class="img-item" :src="item" mode="aspectFill"
						v-for="(item,index) in taskInfo.taskRecorderList[0].photo.split(',')" :key="index"></image> -->
				</view>
				<view class="item-info-sm" v-if="taskInfo.taskRecorderList.length">是否收油：{{taskInfo.taskRecorderList[0].isRecycleOil == 1 ? '已收油' : '未收油'}}</view>
				<view class="item-info-sm" v-if="taskInfo.taskRecorderList.length">备注：{{taskInfo.taskRecorderList[0].remark}}</view>
				
				<!-- <view class="title"> 是否收油 </view>
				<view style="margin-bottom: 20rpx"  v-if="form.taskRecorderList[0].isRecycleOil == 0">未收油</view>
				<view style="margin-bottom: 20rpx"  v-if="form.taskRecorderList[0].isRecycleOil == 1">已收油</view> -->
			</view>
			<!-- <view class="info-box" v-if="taskInfo.taskCheckInList">
				<view class="title-box">收运完毕反馈</view>
				<view class="img-box" v-if="taskInfo.taskCheckInList.documents">
					<image class="img-item" :src="item" mode="aspectFill"
						v-for="(item,index) in taskInfo.taskCheckInList.documents.split(',')" :key="index"></image>
				</view>
			</view>
			<view class="info-box">
				<view class="title-box">收运问题反馈</view>
				<view class="route-box">
					<view class="route-time">内容描述</view>
				</view>
			</view>
			<view class="info-box">
				<view class="title-box">行驶路线</view>
				<view class="route-box">
					<image class="route-img" :src="taskInfo.routingPic" mode="aspectFill"></image>
					<view class="route-time">运输时间：{{taskInfo.collectionTime}}</view>
				</view>
			</view>
			<view class="info-box">
				<view class="title-box">消错记录</view>
				<view class="error-box">
					<view>内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述</view>
					<view class="img-box">
						<image class="img-item" src="https://cdn.uviewui.com/uview/swiper/swiper3.png" mode="aspectFill"
							v-for="(item,index) in 3" :key="index"></image>
					</view>
					<view class="error-status">状态：已处理</view>
				</view>
			</view> -->
		</view>
	
	</view>
</template>
<script>
	import {
		getTaskDetail,
		orderDetail,
		transportationOrderDetail
	} from "@/api/task.js"
	import taskItem from "@/components/pageLayout/listItem/task-item.vue"
	export default {
		components: {
			taskItem
		},
		data() {
			return {
				pageData: {},
				taskInfo: null,
				vehicleTypeOptions: [],
				serviceLifeOptions: [],
				batteryModelOptions: []
			};
		},
		onReady() {

		},
		onShow() {

		},
		onLoad(option) {
			this.pageData = option
			// this.getDictData();
			if(this.pageData.taskType == 1){
				this.getData1()
			}else{
				this.getData()
			}
			

		},
		methods: {
			// async getDictData() {
			// 	// getDictionaryName(vehicleTypeOptions,item.vehicleType)
			// 	this.vehicleTypeOptions = await this.getDictionaryData('vehicle_type');
			// 	this.serviceLifeOptions = await this.getDictionaryData('service_life');
			// 	this.batteryModelOptions = await this.getDictionaryData('battery_model');
			// },
			getData() {
				 // 0 收运任务
				orderDetail(this.pageData).then((res) => {
					this.taskInfo = {
						...res.data,
						...this.pageData
					};
				})
			},
			getData1() {
				 // 1 运输任务
				transportationOrderDetail(this.pageData).then((res) => {
					this.taskInfo = {
						...res.data,
						...this.pageData
					};
				})
			},
		},

	};
</script>
<style lang="scss" scoped>
	.item-info-sm {
		margin-top: 20rpx;
		color: #666668;
		font-size: 30rpx;
	}

	.page-content {
		position: relative;

		.header-bg {
			width: 100%;
			top: 0;
			left: 0;
			z-index: 1;
			position: absolute;
			height: 400rpx;
			background: linear-gradient(101deg, #47B352 1%, #47B352 29%, #1F9970 100%);
		}

		.content-box {
			position: relative;
			z-index: 2;
			padding: 32rpx;

			.electric-info {
				.title-box {
					font-size: 32rpx;
					font-weight: bold;
				}

				.price-box {
					font-size: 30rpx;
					color: #138E57;
				}

				.box-info {
					padding: 0 32rpx;
					margin-top: 24rpx;
					background: #FFFFFF;
					border-radius: 16rpx;

					.electric-item {
						padding: 32rpx 0;
						border-bottom: 1rpx solid #EFEFEF;

						&:last-child {
							border: none;
						}

						.item-logo {
							width: 125rpx;
							height: 125rpx;
							margin-right: 32rpx;
						}

						.item-info {
							.title {
								font-weight: bold;
								font-size: 34rpx;
								color: #000000;
							}

							.remark {
								font-size: 30rpx;
								color: #666668;
								margin-top: 20rpx;
							}
						}
					}
				}
			}

			.info-box {
				padding: 32rpx;
				margin-top: 32rpx;
				background: #FFFFFF;
				border-radius: 16rpx;

				.title-box {
					font-size: 32rpx;
					font-weight: bold;
				}

				.img-box {
					margin-top: 20rpx;
					// display: grid;
					// grid-template-columns: 1fr 1fr 1fr;
					// grid-gap: 16rpx;

					// .img-item {
					// 	width: 196rpx;
					// 	height: 196rpx;
					// }
				}

				.route-box {
					margin-top: 20rpx;

					.route-img {
						width: 100%;
						height: 354rpx;
					}

					.route-time {
						margin-top: 20rpx;
						font-size: 30rpx;
						color: #000000;
					}
				}

				.error-box {
					margin-top: 20rpx;
					font-size: 30rpx;
					color: #000000;

					.error-status {
						margin-top: 20rpx;
						padding: 14rpx 20rpx;
						background: rgba(19, 142, 87, 0.1);
						color: #666668;
					}
				}
			}
		}
	}

	.list-item {
			margin-bottom: 32rpx;
			background: #ffffff;
			border-radius: 18rpx;
			padding: 0 32rpx;
	
			.item-header {
				padding: 20rpx 0;
				font-size: 30rpx;
				color: #000000;
				border-bottom: 1rpx solid #EFEFEF;
	
				.color1 {
					color: #FC880C;
				}
	
				.color2 {
					color: #138E57;
				}
	
				.color3 {
					color: #666668;
				}
			}
	
			.item-middle {
				padding: 30rpx 0;
	
				.item-step {
					position: relative;
	
					.left-line {
						height: calc(100% - 16rpx);
						width: 2rpx;
						background: #EFEFEF;
						position: absolute;
						left: 7rpx;
						top: 31rpx;
					}
	
					.item-check {
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
						background: #138E57;
						margin-right: 20rpx;
						margin-top: 15rpx;
	
						&.active {
							background: #FC880C;
						}
					}
	
					.item-right {
						.item-title {
							font-size: 34rpx;
							font-weight: bold;
							color: #000000;
						}
	
						.item-address {
							margin-top: 16rpx;
							color: #666668;
							font-size: 30rpx;
							margin-bottom: 16rpx;
						}
					}
				}
	
			}
	
			.item-info {
				color: #666668;
				font-size: 30rpx;
			}
	
			.item-bottom {
				border-top: 1rpx solid #EFEFEF;
				padding: 20rpx 0 30rpx;
	
				.option-box {
					margin-top: 20rpx;
				}
	
				.item-info-sm {
					margin-top: 20rpx;
					color: #666668;
					font-size: 30rpx;
				}
			}
		}
	
</style>